<template>
  <div>
    <a-modal title="选择学员" :visible="visible" @ok="handleOk" @cancel="handleCancel" width="750px">
      <a-spin :spinning="loading">
        <!-- <a-input-search
          v-model="name"
          style="width:200px;margin-bottom:20px;"
          placeholder="学员姓名或手机号码"
          clearable
        ></a-input-search>-->
        <a-input
          placeholder="请选择学员姓名或手机号码(回车搜索)"
          style="width: 300px; margin-bottom: 20px"
          v-model="name"
          @search="reload()" 
        >
          <a-tooltip slot="suffix" title="请输入学员姓名或手机号码">
            <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="reload()" />
          </a-tooltip>
        </a-input>
        <a-table
          :columns="columns"
          :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          class="user_management_table"
          :pagination="false"
          :dataSource="tableData"
          :scroll="{ y: 340 }"
          style="border: 1px solid #e8e8e8"
        >
          <span slot="name" slot-scope="text, record">
            <a-tag color="green" v-if="record.type == 1">在读</a-tag>
            <a-tag color="blue" v-if="record.type == 3">潜在</a-tag>
            <a-tag v-if="record.type == 2">历史</a-tag>
            {{ text }}
          </span>
        </a-table>
        <div class="page-foot">
          <span v-if="pageData && pageData.pagination">共{{ pageData.pagination.total }}条数据</span>
          <div>
            <a-pagination  v-if="pageData && pageData.pagination" v-model="nowPage" :total="pageData.pagination.total"  @change="changePage"/>
          </div>
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { studentList } from '@/api/student'
const columns = [
  {
    title: '学员姓名',
    dataIndex: 'name',
    ellipsis: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '手机号',
    ellipsis: true,
    dataIndex: 'main_phone',
    key: 'main_phone',
  },
  // {
  //   title: '年级',
  //   ellipsis: true,
  //   width: 100,
  //   dataIndex: 'grade_name',
  //   key: 'grade_name',
  // },
]
export default {
  name: 'studentModel',
  props: {
    studentArr: Array,
  },
  data() {
    return {
      selectedRowKeys: [], //单选
      visible: false,
      columns,
      tableData: [],
      loading: false,
      name: '', // 查询
      pageData: undefined,
      nowPage: undefined,
    }
  },
  methods: {
    handleOk() {
      let obj = Object
      if (this.selectedRowKeys !== '') {
        this.selectedRowKeys.forEach((val) => {
          this.tableData.forEach((item, index) => {
            if (index == val) {
              obj = item
            }
          })
        })
      }
      this.$emit('reload', obj)
      this.visible = false
    },
    showModel() {
      this.reload()
      this.visible = true
    },
    reload(page = 1, pagesize = 10) {
      this.loading = true
      studentList({
        school_id: this.$store.state.user.school,
        keywords: this.name,
        pageSize: pagesize,
        pageNo: page,
      })
        .then((res) => {
          this.tableData = res.data
          this.pageData = res.meta
          this.nowPage=res.meta.pagination.current_page
          if (this.studentArr.length > 0) {
            let array = []
            this.tableData.forEach((val, index) => {
              this.studentArr.forEach((item) => {
                if (val.id == item) {
                  array.push(index)
                }
              })
            })
            this.selectedRow = array
          } else {
            this.selectedRow = []
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取学员列表失败，请稍后重试')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
    },
    onSelectChange(selectedRowKeys, index) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = index
    },
    changePage(page, pageSize) {
    
      this.page = page
      this.pageSize = pageSize
      this.selectedRowKeys = []
      this.reload(page, pageSize)
    },
  },
  // watch: {
  //   name(val) {
  //     this.reload()
  //   },
  // },
}
</script>

<style lang="less" scoped>
.page-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>